<template>
  <c-card isNone isAffix>
    <div class="table-group">
      <div class="table-group__content">
        <c-table
          row-key="id"
          class="table-template__table"
          :loading="loading"
          :data="tableData"
          v-model:search="searchParams"
          v-model:paging="paging"
          @refresh="queryTableData"
        >
          <!-- 搜索栏 -->
          <template #search>
            <c-select
              width="100%"
              v-model="searchParams.image_type"
              prefixText="类型："
              :loading="typeLoading"
              :optionList="typeGroupData"
            ></c-select>
          </template>

          <!-- 表格 -->
          <template #table>
            <!-- <el-table-column prop="_id" label="ID" /> -->
            <el-table-column label="标题" min-width="180">
              <template #default="{ row }">
                <div
                  style="display: flex; align-items: center"
                  v-if="row.title"
                  @click="copyText(row.title)"
                >
                  <span style="color: #000">标题：</span>{{ row.title }}
                  <el-icon style="margin-left: 10px" class="is-cursor-pointer">
                    <DocumentCopy />
                  </el-icon>
                </div>
                <div
                  style="display: flex; align-items: center"
                  v-if="row.remark"
                  @click="copyText(row.remark)"
                >
                  <span style="color: #000">备注：</span>{{ row.remark }}
                  <el-icon style="margin-left: 10px" class="is-cursor-pointer">
                    <DocumentCopy />
                  </el-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="内容" min-width="160">
              <template #default="{ row }">
                <div
                  class="list-item-row"
                  v-for="(contentItem, contentIndex) in row.content"
                  :key="contentItem"
                >
                  <span class="list-item-name">内容{{ contentIndex + 1 }}：</span>
                  <span class="list-item-title">
                    【{{ getTypeGroupEnum[contentItem.image_type] }}，{{
                      contentItem.image_ids.length
                    }}张图，{{ contentItem.text_ids.length }}个文案】
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
              <template #default="{ row }">
                {{ dayjs(row.create_time).format('YYYY-MM-DD HH:mm:ss') }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="160" fixed="right" align="center">
              <template #default="{ row }">
                <el-button type="primary" text @click="handleDesc(row)">预览</el-button>
                <el-button type="primary" text @click="hanleGetMaterial(row)">领取</el-button>
              </template>
            </el-table-column>
          </template>
        </c-table>
      </div>
    </div>

    <c-dialog title="预览素材" :width="600" name="material-preview-popup">
      <material-preview-popup></material-preview-popup>
    </c-dialog>

    <c-dialog title="复制素材" :width="600" name="material-copy-popup">
      <material-preview-popup isCopy :isPreview="false"></material-preview-popup>
    </c-dialog>
  </c-card>
</template>

<script setup name="el-encap.table-template">
import { ref, computed, onMounted } from 'vue';

// hooks
import { useTable } from '@/hooks/useTable/index.js';
import { useFetch } from '@/hooks/useFetch/index.js';

import { DocumentCopy } from '@element-plus/icons-vue';

// components
import MaterialPreview from '@/components/material-preview/index.vue';
import { MessageBox } from '@/utils/message-box';
import { ElMessage } from 'element-plus';
import MaterialPreviewPopup from '@/components/material-preview-popup/index.vue';

// router
import { useRouter } from 'vue-router';
const router = useRouter();

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

// user
import { useUserStore } from '@/pinia/modules/user.js';
const userStore = useUserStore();

// api
import { getApi } from '@/utils/tools';
import {
  pageMateralList,
  editeMateralStatus,
  getMateralV2,
  createGetMateralRecord,
} from '@/apis/material';
import { userListGroup } from '@/apis/user';

import dayjs from 'dayjs';

import { copyText } from '@/utils/tools.js';

const getTypeGroupEnum = computed(() => {
  return typeGroupData.value.reduce(function (obj, item) {
    obj[item.value] = item.label;
    return obj;
  }, {});
});

// 分类列表
const { loading: typeLoading, data: typeGroupData } = useFetch({
  api: userListGroup,
});

// 表格相关
const { loading, paging, searchParams, tableData, queryTableData, delTableRow } = useTable({
  api: pageMateralList,
  params: {
    image_type: '',
    get_userid: -1,
    status: 0,
    userid: -1,
  },
  options: {},
  callBack: () => {},
});

// 详情页
const handleDesc = async (row) => {
  modalStore.openModal('material-preview-popup', { _id: row._id });
};

const hanleGetMaterial = (item) => {
  MessageBox({
    title: '领取素材',
    message: '确定确定领取该素材？',
    beforeClose: async (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;

        let res = await createGetMateralRecord({
          material_id: item._id,
        }).catch((err) => err);

        instance.confirmButtonLoading = false;

        if (res?.code !== 0) return;

        ElMessage.success('领取成功');
        queryTableData();

        userStore.setUserState();

        modalStore.openModal('material-copy-popup', { _id: item._id });
      }
      done();
    },
  });
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.table-template {
  display: flex;
  flex-direction: column;
}

.table-group {
  height: 100%;
  display: flex;

  &__content {
    width: 100%;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    @include card-box;
  }
}

.table-drag-img {
  font-size: 20px;
  vertical-align: middle;
  cursor: grab;
  margin: 0;
  padding: 0;
}

.list-item-row {
  padding: 4px 0;
}

.list-item-name {
  font-size: 14px;
}

.list-item-title {
  font-size: 14px;
  color: #333;
  // white-space: pre-wrap;
}

.preview {
  width: 375px;
  height: 100%;
  // overflow-y: auto;
  margin-left: 14px;
  @include card-box;
  flex-shrink: 0;
}
</style>
